$(function () {
  //为退出登录按钮绑定点击事件
  $('.logout').on('click', function () {
    //1.询问用户是否要退出登录
    //2.如果用户确认退出了
    //2.1清空 token
    //2.2跳转到登录页面
    layer.confirm('确认退出登录吗?', { icon: 3, title: '提示' }, function (index) {
      //do.something
      localStorage.removeItem('token');
      location.href = '/login.html';

      //关闭弹出层
      layer.close(index);
    });
  });
  //获取用户信息的函数
  initUserInfo();
});

//封装获取用户基本信息的函数
function initUserInfo() {
  axios.get('/my/userinfo').then(({ data: res }) => {
    console.log('成功了！');
    console.log(res);

    //调用渲染用户信息的函数
    renderUserInfo(res.data);

  }, (error) => {
    console.log('失败了！');
    console.dir(error);

    //1.判断"响应状态码"是否等于401
    //2.如果是，返回登录页面
    if (error.response.status === 401) {
      localStorage.removeItem('token');//清空 "假" token
      location.href = '/login.html';
    }
  });
};

//封装渲染用户信息的函数
function renderUserInfo(data) {
  const name = data.nickname || data.username;
  const textAvatar = name.charAt(0).toUpperCase();

  //渲染头部区域的用户信息
  //判断用户，是否有图片的头像，如果有，执行 if；否则执行else
  if (data.user_pic) {
    //有图片的头像
    $('#header-avatar').html(`<img src="${data.user_pic}"class="layui-nav-img">
    个人中心`);
    
  } else {
    //没有图片的头像，应该渲染 "文本头像"
    $('#header-avatar').html(`<div class="text-avatar">${textAvatar}</div>
    个人中心`);
    
  }

  //渲染侧边栏的用户信息
  if (data.user_pic) {
    //渲染图片头像
    $('.user-info-box').html(`<img src="${data.user_pic}"class="layui-nav-img">
    <span class="welcome">&nbsp;欢迎&nbsp; ${name}</span>`);
  } else {
    //渲染文本头像
    $('.user-info-box').html(`<div class="text-avatar">${textAvatar}</div>
    <span class="welcome">&nbsp;欢迎&nbsp; ${name}</span>`);
  }

  //在页面元素动态生成之后,调用 latui 提供的 element.render() 函数
  //渲染动画效果
  layui.element.render('nav');
};


//定义切换高亮的函数
function highlight(kw) {
  //测试函数是否被调用
  // console.log('被调用了');
  
  $('dd').removeClass('layui-this');
  //标签:contains("内容文字") 可以通过文字内容获取标签
  $(`dd:contains("${kw}")`).addClass('layui-this');
};
